<template>
<view>
 <view class="card-item" v-for="(item,index) in orderList" :key="index">
         <view class="item-content border-bottom">
           <view class="left-box">
             <image :src="baseUrl+item.orderUrl" mode="aspectFill" 
             @tap="previewImg(baseUrl+item.orderUrl)"></image>
           </view>
           <view class="right-box">
             <view class="floor">
              <div v-for="(item1,index) in equipmentTypeList" :key="index" 
              v-if="item1.equipmentTypeId == item.equipmentTypeId">
              {{item1.equipmentTypeName}}
              </div>
             </view>
             <text class="date">{{item.orderTime}}</text>
             <text class="desc" v-for="(dict,index) in equipmentModelList" :key="index"  v-if="dict.dictValue == item.equipmentModel">{{dict.dictLabel}}</text>
             <view class="item-footer">
             <text class="delrepair" @tap="deleteOrder(item.id)">删除订单</text>
             <text class="distribution" @tap="updateOrder(item.id,item.equipmentTypeId)">修改订单</text>
             <text class="queryitem" @tap="orderDetail(item.id,item.equipmentTypeId)">查看详情</text>
             </view>
           </view>
         </view>
       </view>
       <view class="no-devicelist" v-if="orderList.length<=0">
         <image src="https://mkservice.mk-iot.com/subFile/mk2240/no-device.png" alt="" />
         <text>暂无订单</text>
       </view>
      </view>
</template>

<script>
  import {
    getEquipmentlist,
    listOrder,getOrder,delOrder
  } from "@/api/system/equiment/equipment.js"
    import config from '@/config'
  export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      userName: null,
      // 是否正在请求数据,节流阀
      isloading: false,
      orderList: [],
      equipmentModelList:[],
      //设备类型列表
      equipmentTypeList:[],
      // 查询参数
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId:null,
        equipmentTypeId: null,
        equipmentModel: null,
        userNumber: null
      },
    }
    },
    created() {
      this.getequipmentTypeList();
      //查询设备型号
      this.getDicts("equipment_model").then(response => {
        this.equipmentModelList = response.data
      });
    },
    onLoad(option) {
     this.queryParams.userId = uni.getStorageSync("userId")
     this.queryMyOrderToList()
    },
    methods: {
    //查询设备分类
    getequipmentTypeList(){
      getEquipmentlist().then(res=>{
        this.equipmentTypeList=res.rows;
      })
    },
      queryMyOrderToList(cb) {
        // 打开遮罩层
        this.$modal.loading("数据加载中...");
        // ** 打开节流阀
        this.isloading = true
        listOrder(this.queryParams).then(response => {
          if (response.code === 200) {
            // 关闭遮罩层
            this.$modal.closeLoading();
            uni.stopPullDownRefresh()
            // 关闭节流阀
            this.isloading = false
            // 只要数据请求完毕，就立即按需调用 cb 回调函数
            cb && cb()
            this.orderList = [...this.orderList, ...response.rows]
            this.count = response.total
          }
        })
      },
      //浏览图片
      previewImg(url) {
        uni.previewImage({
          urls: [url]
        })
      },
     //查看订单详细页
      orderDetail(id,equipmentTypeId) {
        this.$tab.navigateTo('../../productIntroduction/detailed/index?orderId='+id+"&isFlag=true&equipmentTypeId="+equipmentTypeId)
      },
      //修改订单数据
      updateOrder(id,equipmentTypeId){
         this.$tab.navigateTo('../../productIntroduction/detailed/index?orderId='+id+"&equipmentTypeId="+equipmentTypeId)
      },
      //删除
      deleteOrder(id) {
        this.$modal.confirm('确定删除此订单吗？').then(() => {
          delOrder(id).then(response => {
            if (response.code === 200) {
                this.$modal.msgSuccess("删除成功")
                this.empty()
                this.queryMyOrderToList()
            }
          })
        })
      },
      empty() {
        //重置关键数据
        this.count = 0
        this.isloading = false
        this.orderList = []
        this.queryParams.pageNum = 1
         this.queryParams.pageNum
      },
    },
    // 触底的事件
    onReachBottom() {
      // 判断是否还有下一页数据
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.count) return uni.$showMsg('数据加载完毕')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isloading) return
      //让页码值自增+1
      this.queryParams.pageNum += 1
      // 重新获取列表数据
      this.queryMyOrderToList()
    
    },
    //下拉事件
    onPullDownRefresh() {
      //重置关键数据
      this.count = 0
      this.empty()
      //重新发起数据请求
      this.queryMyOrderToList()
    },
  }
</script>

<style lang="scss">
  .card-item {
    margin: 20rpx;
    border-radius: 10rpx;
    position: relative;
  
    .item-content {
      background-color: white;
      display: flex;
      padding: 20rpx;
      position: relative;
  
      .left-box>image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
        border: 2px solid rgb(209, 209, 209);
      }
  
      .right-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-left: 20rpx;
  
        .floor {
          font-weight: bold;
          font-size: 32rpx;
  
          .level-tag {
            font-size: 23rpx;
            color: white;
            margin-left: 5px;
            padding: 5rpx 12rpx;
            display: inline-block;
            background-color: danger;
            width: 60px;
            text-align: center;
          }
        }
  
        .desc {
          font-size: 24rpx;
          margin: 5rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
  
        .state {
          width: 50px;
          color: #fff;
          font-size: 28rpx;
          margin: 5rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-align: center;
        }
  
        .pending {
          background-color: #ee0a24;
          width: 100px;
        }
  
        .processing {
          background-color: #ff976a;
        }
  
        .audit {
          background-color: #07c160;
          width: 100px;
        }
  
        .audited {
          background-color: #07c160;
          width: 100px;
        }
  
        .date {
          font-size: 25rpx;
          color: var(--color-text-second);
          margin-top: 5rpx;
        }
      }
  
      .item-footer {
        font-size: 28rpx;
        padding: 10rpx;
        text-align: right;
      }
  
      .item-footer>.delrepair {
        margin-left: 20rpx;
        border: 1px solid red;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
        color: red;
      }
      .item-footer>.distribution {
        margin-left: 20rpx;
        border: 1px solid orange;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
        color: orange;
      }
  
      .item-footer>.completed {
        margin-left: 20rpx;
        color: rgb(31, 134, 0);
        border: 1px solid rgb(31, 134, 0);
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
  
      .item-footer>.evaluateitem {
        margin-left: 20rpx;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
  
      .item-footer>.queryitem {
        margin-left: 20rpx;
        color: #1989FA;
        border: 1px solid #1989FA;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
    }
  }
  .no-devicelist {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
     image {
        margin-top: 200rpx;
        width: 200rpx;
        height: 200rpx;
      }
      
     text {
        margin-top: 20rpx;
      }
    }
</style>